<template>
  <div class="home">
    <!-- 顶部区域 -->
    <div class="top-card">
      <!-- 左侧区域 -->
      <div class="left">
        <img
          src="https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E7%B3%BB%E7%BB%9F%E6%9B%B4%E6%96%B0.png"
        />
        <div class="name">今日更新</div>
      </div>
      <!-- 右侧区域 -->
      <div class="right">
        <div class="marques">{{ todayStr }}</div>
      </div>
    </div>

    <SkeletonLoading v-if="skeleton"></SkeletonLoading>

    <div class="view" v-else>
      <!-- 推荐文章 -->
      <div class="recommend-article">
        <div class="title">推荐文章</div>
        <ArticleCard
          v-for="item in recommendArticles"
          :key="item.id"
          :articleInfo="item"
          @click="router.push(`/article/${item.id}`)"
        />
      </div>

      <!-- 最近更新 -->
      <div class="latest">
        <div class="title">最近更新</div>
        <NotesCard
          :notesInfo="item"
          v-for="item in latestNotes"
          :key="item.id"
          @click="router.push(`/note/${item.id}`)"
        />
        <ArticleCard
          v-for="item in latestArticles"
          :key="item.id"
          :articleInfo="item"
          @click="router.push(`/article/${item.id}`)"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import ArticleCard from "@/components/ArticleCard.vue";
import NotesCard from "@/components/NotesCard.vue";
import { onMounted, ref } from "vue";
import { getLatestListService, getRecommendListService } from "@/api/Articles";
import { getLatestNotesService } from "@/api/Notes";
import { useRouter } from "vue-router";
import { getTodayUpdateService } from "@/api/Home";
import { onBeforeRouteUpdate } from "vue-router";
import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
import SkeletonLoading from "@/components/SkeletonLoading.vue";

const router = useRouter();
onBeforeRouteUpdate((to) => {
  if (to.meta.title) {
    document.title = to.meta.title;
  }
});

const skeleton = ref(true);

// 推荐文章数据
const recommendArticles = ref([]);
// 最近更新文章数据
const latestArticles = ref([]);
// 最近更新动态数据
const latestNotes = ref([]);
// 今日更新文章 marquee
const todayStr = ref("");

// 判断移动端还是pc端
const backpoints = useBreakpoints(breakpointsTailwind);
const isMobile = backpoints.smaller("md");
const isDesktop = backpoints.greaterOrEqual("md");
const displayText = (data) => {
  if (isMobile.value) {
    todayStr.value = data.slice(0, 13) + "...";
  }
  if (isDesktop.value) {
    todayStr.value = data;
  }
};

/**
 * 查询推荐文章数据
 */
const getRecommendArticles = async () => {
  const { data } = await getRecommendListService();
  recommendArticles.value = data;
};
/**
 * 查询最近更新文章数据
 */
const getLatestArticles = async () => {
  await getLatestListService().then(({ data }) => {
    skeleton.value = false;
    latestArticles.value = data;
  });
};
/**
 * 查询最近更新动态数据
 */
const getLatestNotes = async () => {
  const { data } = await getLatestNotesService();
  latestNotes.value = data;
};
/**
 * 查询今日更新 marquee
 */
const getTodayUpdate = async () => {
  const { data } = await getTodayUpdateService();
  displayText(data);
};

onMounted(() => {
  getRecommendArticles();
  getLatestArticles();
  getLatestNotes();
  getTodayUpdate();
});
</script>

<style lang="scss" scoped>
.home {
  height: 102.5vh;
  overflow: auto;
  scrollbar-width: none;
  padding: 24px;
  background-color: #fff !important;
  border-radius: 0px 0px 12px 12px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);

  .top-card {
    min-height: 60px;
    padding: 0px 18px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    background-color: #c6e8eb;
    transition: all 0.3s;
    cursor: pointer;

    &:hover {
      transform: scale(1.02);
      box-shadow: 2px 2px 10px rgba(193, 226, 243, 0.7);
    }

    // 左侧区域
    .left {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-right: 24px;
      flex-shrink: 0;
      img {
        width: 32px;
        transition: all 0.3s;
        cursor: pointer;
        &:hover {
          transform: scale(1.2);
        }
      }
      .name {
        font-size: 18px;
        white-space: nowrap;
      }
    }

    .right {
      flex: 1;
      min-width: 0; // 关键：允许内容溢出

      .marques {
        white-space: nowrap; // 禁止换行
        overflow-x: auto; // 横向滚动
        overflow-y: hidden; // 隐藏纵向滚动
        -webkit-overflow-scrolling: touch; // iOS平滑滚动
        padding-bottom: 2px; // 防止滚动条遮挡

        // 隐藏滚动条（可选）
        scrollbar-width: none; /* Firefox */
        &::-webkit-scrollbar {
          display: none; /* Chrome/Safari */
        }
      }
    }

    @media (max-width: 768px) {
      padding: 0 12px;

      .left {
        margin-right: 12px;

        img {
          width: 28px;
        }
        .name {
          font-size: 16px;
        }
      }
    }
  }

  .recommend-article {
    padding-top: 50px;

    .title {
      height: 42px;
      line-height: 42px;
      font-size: 22px;
      font-weight: bold;
    }
  }

  .latest {
    padding-top: 50px;

    .title {
      height: 42px;
      line-height: 42px;
      font-size: 22px;
      font-weight: bold;
    }
  }

  .recommend-project {
    padding-top: 50px;

    .title {
      height: 42px;
      line-height: 42px;
      font-size: 22px;
      font-weight: bold;
    }
  }
}
</style>